<template>
    <view>
        <!-- <u-navbar class="gradient-bg" title="完成服务" navbarType="0" fontColor="#ffffff"
            gradient="linear-gradient(to bottom right, #2e996f, #3f99ab)"></u-navbar> -->
        <view style="background-color: #efefef;height: 30rpx;"></view>
        <view style="padding:0 30rpx; background-color: #fff;">
            <view class="title-status">
                <view class="title">
                    <text class="p1">订单号：</text>
                    <text class="p2">{{item.order_no}}</text>
                </view>
                <view class="status">
                    <text>服务中</text>
                    <!-- <text class="iconfont icon-laji del" v-if="item.order_state===-1 || item.order_state===2" @click.stop="del(item.order_no)">
                </text> selectDictLabel(stateList,item.order_state) -->
                </view>
            </view>

            <view class="goods-list">
                <!-- <view class="status-btn">
                <view></view>
                <view class="code">
                    <text>服务完成码：{{item.service_code}}</text>
                </view>
            </view> -->
                <view class="goods">
                    <view class="thumb">
                        <image :src="item.cover_pict" mode="heightFix"></image>
                    </view>
                    <view class="item">
                        <view class="goods-name">
                            <text class="title one-omit">
                                {{item.name}}
                            </text>
                            <!-- <text class="desc">服务时长：{{item.service_duration}}分钟</text> -->
                            <text class="desc">服务时间：{{item.service_time}}</text>
                        </view>
                        <view class="goods-price">
                            <text class="price">￥{{item.pay_price}}</text>
                            <!-- <text class="num">×1</text> -->
                        </view>
                    </view>
                </view>
            </view>
            <view class="btom">
                <view class="addr">
                    <view class="txt-l">
                        <text class="desc">预约人：{{item.address_name}}</text>
                    </view>
                    <view class="txt-r">
                        <!-- <text class="price">金额：￥{{item.pay_price}}</text> -->
                    </view>
                </view>
                <view class="addr">
                    <view class="txt-l">
                        <text
                            class="desc">服务地址：{{item.address_province+item.address_city+item.address_area+item.address_detailed}}</text>
                    </view>
                </view>
                <view class="addr">
                    <view class="txt-l">
                        <text class="desc">电话：{{item.address_mobile}}</text>
                    </view>
                </view>
            </view>
            <u--form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="180rpx">
                <u-form-item label="服务完成码:" prop="code" style="width: 200rpx;" :required="true">
                    <u-input v-if="!check" type="number" v-model="form.code" placeholder="请输入完成码" border="none" />
                    <span v-if="check">{{item.service_code}}</span>
                </u-form-item>
                <u-form-item label="完成备注:" prop="notes">
                    <u-textarea v-if="!check" v-model="form.notes" placeholder="请输入完成备注" autoHeight border="bottom" />
                    <span v-if="check">{{item.complete_notes}}</span>
                </u-form-item>
            </u--form>

            <view class="upload-img">
                <view class="img-title">
                    <view class="text"><span style='color: red;'>*</span>上传图片/视频</view>
                </view>
                <!-- 多图仅支持图片 -->
                <!-- <xzl-upload :show-progress="true" :upload-text="uploadText" multiple ref="uUpload" :header="header" :action="action" :auto-upload="true"
                    :max-size="2* 1024 * 1024" @on-change="onChoose" name="encryption" max-count="9" :fileList="fileList" @on-list-change="onListChange"
                    @on-uploaded="onUploaded" @on-progress="progress" @on-remove="remove" @befordelIndex="befordelIndex">
                </xzl-upload> -->

                <multifile-upload v-if="!check" :max="5" v-model="fileList" mediaType="all" :maxSize="4" :chooseNum="9"
                    :maxDuration="6" :sourceType="['album','camera']" :compress="false" :quality="80"
                    :formData="{'file': '123'}" :remove="true" @uploadSuccess="fileUploadSuccess1"
                    @imgDelete="fileImgDelete" @uploadFail="fileUploadFail"
                    action="https://yl.weilankangyang.com/api/common/fileUpload"></multifile-upload>
                <multifile-upload v-if="check" :max="5" v-model="item.complete_images" mediaType="all" :maxSize="4"
                    :chooseNum="9" :maxDuration="6" :sourceType="['album','camera']" :compress="false" :quality="80"
                    :formData="{'file': '123'}" :changeZ="true" :remove="false" :add="false"></multifile-upload>

            </view>
        </view>
        <!--提交-->
        <view class="submit-btn" v-if="!check">
            <view class="btn" @click="submit">
                <text>提交</text>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        getOrdersInfo,
        completeOrder
    } from "@/api/order.js"
    export default {
        data() {
            return {
                item: {},
                fileList: [],
                form: {
                    code: '',
                    notes: '',
                    images: ''
                },
                rules: {
                    'code': [{
                        required: true,
                        message: '请输入服务完成码',
                        trigger: ['blur', 'change']
                    }],
                    'images': [{
                        required: true,
                        message: '请上传完成图片',
                        trigger: ['blur', 'change']
                    }]
                },
                check: '',
                hideRequiredAsterisk: true,
                orderNo: "",
            }
        },
        onLoad(query) {
            if (query.data) {
                this.check = false
                this.orderNo = JSON.parse(decodeURIComponent(query.data)).order_no
            } else if (query.key) {
                uni.setNavigationBarTitle({
                    title: "完成凭证"
                })
                this.check = true
                this.orderNo = JSON.parse(decodeURIComponent(query.key)).order_no
            }
            this.getList()
        },
        onReady() {
            //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
            this.$refs.form.setRules(this.rules)
        },
        methods: {
            getList() {
                this.loading = true
                getOrdersInfo({
                    order_no: this.orderNo
                }).then(res => {
                    this.item = res.data
                    // this.data.cover_pict = this.data0.cover_pict;
                    // this.data.name = this.data0.name
                    // this.data.service_duration = this.data0.service_duration
                    console.log(this.data, "hahha")
                    this.loading = false
                })
            },
            fileUploadSuccess1(res) { //上传成功
                /****************
                因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
                ***************/
                var _res = JSON.parse(res.data);
                console.log('_res', _res)
                if (_res.code == 1) {
                    this.fileList.push(_res.data[0].fileurl);
                }
                /*******************************/
            },
            fileImgDelete(e) {
                console.log('fileImgDelete', e)
            },
            fileUploadFail(err) { //上传失败
                console.log('err', err)
            },
            submit() {
                // if (!this.form.code) {
                //     uni.showToast({
                //         title: '请输入服务完成码',
                //         icon: 'none'
                //     });
                //     return
                // }

                this.$refs.form.validate().then(res => {
                    this.form.order_no = this.orderNo ? this.orderNo : ''
                    this.form.images = this.fileList.length > 0 ? this.fileList.join("|") : ""
                    if (!this.form.images) {
                        uni.showToast({
                            title: '请上传完成图片',
                            icon: 'none'
                        });
                        return
                    }
                    completeOrder(this.form).then(res => {
                        if (res.code == 1) {
                            this.$message("服务已完成~")
                            setTimeout(() => {
                                // uni.navigateBack({
                                //     delta: 1,
                                // })
                                uni.reLaunch({
                                    url: '/pages/order/index'
                                })
                            }, 1000)
                        }
                    })
                }).catch(errors => {})
            }

        }
    }
</script>

<style scoped lang='scss'>
    .input-info {
        padding-top: 30rpx;
    }

    .info {
        display: flex;
        align-items: center;
    }

    /* .more input {
        margin-left: 20rpx;
        width: 300rpx;
        height: 60rpx;
        border: 1rpx solid #efefef;
        border-radius: 6rpx;
        font-size: 28rpx;
    } */

    .content0 {
        padding-top: 30rpx;

        textarea {
            width: 100%;
            height: 120rpx;
            background-color: #f6f6f6;
            border-radius: 20rpx;
            padding: 20rpx;
            font-size: 26rpx;
            color: #222222;
        }
    }


    .title-status {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100rpx;

        .title {
            display: flex;
            align-items: center;
            line-height: 26rpx;

            .p1 {
                font-size: 26rpx;
                color: #3c3c3c;
            }

            .p2 {
                font-size: 26rpx;
                /* color: #989898; */
            }
        }

        .status {
            display: flex;
            align-items: center;

            text {
                font-size: 26rpx;
                color: #e5530e;
            }

            .del {
                padding: 10rpx;
                font-size: 34rpx;
                color: #222222;
                background-color: #f6f6f6;
                border-radius: 100%;
                margin-left: 20rpx;
            }
        }
    }

    .goods-list {
        width: 100%;
        padding: 20rpx 0;
        border-top: 2rpx solid #dcdcdc;
        border-bottom: 2rpx solid #dcdcdc;

        .goods {
            display: flex;
            align-items: center;
            width: 100%;

            .thumb {
                display: flex;
                align-items: center;
                width: 23%;
                height: 100%;
                margin-right: 20rpx;

                image {
                    //   width: 106rpx;
                    height: 156rpx;
                    border-radius: 10rpx;
                }
            }

            .item {
                display: flex;
                align-items: center;
                width: 76%;
                height: 100%;
                justify-content: space-between;

                .goods-name {
                    width: 80%;
                    height: 136rpx;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .title {
                        font-size: 26rpx;
                        color: #0a0a0a;
                        font-weight: 600;
                        // margin-bottom: 14rpx;
                    }

                    .desc {
                        display: block;
                        font-size: 24rpx;
                        /* color: #999999; */
                    }

                    text:nth-child(2) {
                        /* margin-bottom: 14rpx; */
                    }
                }

                .goods-price {
                    display: flex;
                    flex-direction: column;
                    text-align: right;
                    justify-content: space-between;
                    height: 106rpx;

                    .price {
                        font-size: 36rpx;
                        color: #e5530e;
                        // margin-bottom: 30rpx;
                    }

                    .num {
                        font-size: 26rpx;
                        color: #3c3c3c;
                        margin-bottom: 14rpx;
                    }

                    // text {
                    //   color: #222222;
                    // }
                    // .min {
                    //   font-size: 26rpx;
                    // }
                    // .max {
                    //   font-size: 34rpx;
                    // }
                }
            }
        }
    }

    .status-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-bottom: 30rpx;

        // height: 100rpx;
        .code {
            text {
                font-size: 26rpx;
                color: #e8380d;
            }
        }

        .button {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            height: 100%;

            .btn {
                padding: 10rpx 30rpx;
                border: 2rpx solid #eeeeee;
                border-radius: 100rpx;
                margin-left: 20rpx;

                text {
                    font-size: 26rpx;
                    color: #555555;
                }
            }

            .action {
                background-color: #ea5504;
                border: 2rpx solid #e5530e;

                text {
                    color: #ffffff;
                }
            }
        }
    }

    .btom {
        padding: 30rpx 0;
        border-bottom: 2rpx solid #dcdcdc;

        .addr {
            display: flex;
            justify-content: space-between;
            align-items: center;
            //   height: 60rpx;
            padding-bottom: 20rpx;

            .txt-l {
                .desc {
                    display: block;
                    font-size: 26rpx;
                    /* color: #999999; */
                }
            }

            .txt-r {
                .price {
                    font-size: 28rpx;
                    color: #3c3c3c;
                }
            }
        }
    }

    .btnB {
        padding-bottom: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .btn {
            width: 160rpx;
            height: 56rpx;
            // margin: 0 auto;
            background-color: #ea5504;
            border-radius: 24rpx;
            font-size: 24rpx;
            line-height: 56rpx;
            text-align: center;
            color: #ffffff;
        }
    }

    /*上传图片*/
    .upload-img {
        /* padding: 0 30rpx; */
        margin-bottom: 10rpx auto;
        background-color: #ffffff;

        /* border-radius: 20rpx; */
        .img-title {
            display: flex;
            align-items: center;
            width: 100%;
            height: 80rpx;

            .text {
                font-size: 26rpx;
                color: #222222;
            }
        }

        .img-list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            width: 100%;
            height: 200rpx;

            .list {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 23%;
                height: 160rpx;
                margin-right: 2%;

                image {
                    width: 160rpx;
                    height: 160rpx;
                    border-radius: 10rpx;
                }

                text {
                    position: absolute;
                    right: -10rpx;
                    top: -20rpx;
                    font-size: 34rpx;
                    color: #707070;
                }
            }

            .list:nth-child(4n) {
                margin-right: 0;
            }

            .up-img {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 24%;
                height: 160rpx;
                box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
                border-radius: 10rpx;
                margin-right: 2%;

                image {
                    width: 60rpx;
                    height: 60rpx;
                }
            }
        }
    }

    /*提交*/
    .submit-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100rpx;
        margin-top: 100rpx;

        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80%;
            height: 70rpx;
            background: linear-gradient(to right, $base, $change-clor);
            box-shadow: 0 0 10rpx $base;
            border-radius: 80rpx;

            text {
                font-size: 28rpx;
                color: #ffffff;
            }
        }
    }
</style>